import { Button, Card, Drawer, Modal, Space, Switch, Table } from "antd";
import React, { useEffect, useState } from "react";
import type { ColumnsType } from "antd/es/table";
import { useSelector } from "react-redux";
import { RootState } from "@/redux";
import { cancelTopBlog, getBlogDetail, getBlogList, removeBlog, topBlog, updateBlog } from "@/redux/modules/blog/action";
import useMessage from "@/hooks/useMessage";
import useModal from "@/hooks/useModal";
import styles from "./index.module.less";
import BlogAdd from "../BlogAdd";
import BlogDetail from "../BlogDetail";
import BlogFilter from "../BlogFilter";
import { Blog } from "@/api/interface/blog";

const BlogList: React.FC = (props: any) => {
	interface DataType {
		id: number;
		key: number;
		title: string;
		author: string;
		blog_read: number;
		blog_like: number;
		top: boolean;
		visible: boolean;
		createdAt: string;
	}
	[];

	const columns: ColumnsType<DataType> = [
		{
			title: "标题",
			dataIndex: "title",
			key: "title",
			ellipsis: true
		},
		{
			title: "发布人",
			dataIndex: "author",
			key: "author"
		},
		{
			width: 100,
			title: "是否置顶",
			dataIndex: "top",
			key: "top",
			render: (_, row) => <Switch defaultChecked={row.top} onChange={(checked: boolean) => onBlogTop(checked, row.id)} />
		},
		{
			width: 100,
			title: "是否隐藏",
			dataIndex: "visible",
			key: "visible",
			render: (_, row) => (
				<Switch
					defaultChecked={row.visible}
					onChange={(checked: boolean) => updateBlog({ id: row.id, visible: Number(checked) })}
				/>
			)
		},
		{
			width: 80,
			title: "阅读量",
			dataIndex: "blog_read",
			key: "blog_read"
		},
		{
			width: 80,
			title: "点赞数",
			dataIndex: "blog_like",
			key: "blog_like"
		},
		{
			title: "创建日期",
			dataIndex: "createdAt",
			key: "createdAt"
		},

		{
			title: "操作",
			key: "action",
			render: (_, row) => {
				return (
					<>
						<Space size="middle">
							<a onClick={() => openDetail(row.id)}>详情</a>
							<a onClick={() => openEdit(row.id)}>修改</a>
							<a onClick={() => openModal(row.id)}>删除</a>
						</Space>
					</>
				);
			}
		}
	];

	const listExtra = (
		<div style={{ display: "flex", gap: 8 + "px" }}>
			<Button type="primary" onClick={() => setAddVisible(true)}>
				新增
			</Button>
			<Button type="primary" onClick={() => getBlogList()}>
				刷新
			</Button>
		</div>
	);

	const { contextHolder, success } = useMessage();
	const { id, isModalOpen, openModal, closeModal } = useModal();

	const deleteBlog = () => {
		removeBlog(id);
		closeModal();
		success("删除成功");
	};
	const onBlogTop = (checked: boolean, id: number) => {
		if (checked) {
			// 置顶
			topBlog(id);
		} else {
			cancelTopBlog(id);
		}
	};

	const blogList = useSelector((state: RootState) => state.blog.blogList);
	const blogTotal = useSelector((state: RootState) => state.blog.blogTotal);

	const data: DataType[] = blogList.map(item => {
		return {
			id: item.id,
			key: item.id,
			title: item.title,
			author: item.author,
			blog_read: item.blog_read,
			blog_like: item.blog_like,
			top: item.top === 1 ? true : false,
			visible: item.visible === 1 ? true : false,
			createdAt: item.createdAt
		};
	});

	const onChangePage = (page: number) => {
		getBlogList(page, 10);
	};

	useEffect(() => {
		getBlogList();
	}, []);

	// 详情
	const [detailVisible, setDetailVisible] = useState(false);
	const openDetail = (id: number) => {
		// 获取详情
		getBlogDetail(id);
		setDetailVisible(true);
	};

	// 修改
	const [editVisible, setEditVisible] = useState(false);
	const openEdit = async (id: number) => {
		getBlogDetail(id);
		setEditVisible(true);
	};
	const onCloseEdit = () => {
		getBlogList();
		setEditVisible(false);
	};

	// 新增
	const [addVisible, setAddVisible] = useState(false);
	const onCloseAdd = () => {
		getBlogList();
		setAddVisible(false);
	};

	// 搜索
	const onSearch = (data?: Blog) => {
		getBlogList(1, 10, data);
	};

	return (
		<div className={styles.root}>
			{contextHolder}
			<BlogFilter onSearch={onSearch} />
			<Card title="数据列表" extra={listExtra}>
				<Table columns={columns} dataSource={data} pagination={{ total: blogTotal, onChange: onChangePage }} />
			</Card>

			<Modal title="提醒" mask={false} visible={isModalOpen} onOk={deleteBlog} onCancel={closeModal}>
				确定删除该博客吗
			</Modal>

			<Drawer title="详情" placement="right" width={500} onClose={() => setDetailVisible(false)} visible={detailVisible}>
				<BlogDetail></BlogDetail>
			</Drawer>

			<Drawer
				title="新增"
				placement="right"
				width={500}
				onClose={() => {
					setAddVisible(false);
				}}
				visible={addVisible}
			>
				<BlogAdd onComfirm={onCloseAdd} visible={addVisible}></BlogAdd>
			</Drawer>

			<Drawer
				title="修改"
				placement="right"
				width={500}
				onClose={() => {
					setEditVisible(false);
				}}
				visible={editVisible}
			>
				<BlogAdd type="edit" onComfirm={onCloseEdit}></BlogAdd>
			</Drawer>
		</div>
	);
};

export default BlogList;
